<template>
  <view class="luch-request">
    <view class="section">
      <view class="title">基础请求示例</view>
      <view class="content">
        <button @click="handleGet">GET 请求</button>
        <button @click="handleGetWithLoading">带加载提示的 GET 请求</button>
        <button @click="handleRequest">使用 request 方法</button>
      </view>
    </view>

    <view class="section">
      <view class="title">分页数据示例</view>
      <view class="content">
        <button @click="handleGetPagination">GET 分页数据</button>
        <button @click="handleRequestPagination">request 分页数据</button>
      </view>
    </view>

    <view class="section">
      <view class="title">响应结果</view>
      <view class="result">
        <text>{{ result }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import {
  getPaginationList,
  getUser,
  getUserWithLoading,
  requestPaginationList,
} from '@/test/apiTest'
import { request } from '@/utils'

export default {
  name: 'LuchRequest',
  data() {
    return {
      result: '',
    }
  },
  methods: {
    // 基础请求方法
    async handleGet() {
      try {
        const res = await getUser()
        this.result = JSON.stringify(res, null, 2)
      } catch (error) {
        this.result = `GET 请求失败: ${error.message}`
      }
    },

    async handleGetWithLoading() {
      try {
        const res = await getUserWithLoading()
        this.result = JSON.stringify(res, null, 2)
      } catch (error) {
        this.result = `带加载提示的 GET 请求失败: ${error.message}`
      }
    },

    async handleRequest() {
      try {
        const res = await request({
          url: '/getInfo',
          method: 'GET',
        })
        this.result = JSON.stringify(res, null, 2)
      } catch (error) {
        this.result = `request 方法请求失败: ${error.message}`
      }
    },

    // 分页数据请求
    async handleGetPagination() {
      try {
        const res = await getPaginationList()
        this.result = JSON.stringify(res, null, 2)
      } catch (error) {
        this.result = `GET 分页数据请求失败: ${error.message}`
      }
    },

    async handleRequestPagination() {
      try {
        const res = await requestPaginationList()
        this.result = JSON.stringify(res, null, 2)
      } catch (error) {
        this.result = `request 分页数据请求失败: ${error.message}`
      }
    },
  },
}
</script>

<style lang="scss">
.luch-request {
  min-height: 100vh;
  padding: 20rpx;
  background-color: #f5f5f5;

  .section {
    padding: 20rpx;
    margin-bottom: 30rpx;
    background-color: #fff;
    border-radius: 10rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

    .title {
      margin-bottom: 20rpx;
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }

    .content {
      display: flex;
      flex-wrap: wrap;
      gap: 20rpx;

      button {
        margin: 0;
        font-size: 28rpx;
        color: #fff;
        background-color: #007aff;
        border-radius: 8rpx;

        &:active {
          opacity: 0.8;
        }
      }
    }
  }

  .result {
    padding: 20rpx;
    margin-top: 20rpx;
    font-size: 28rpx;
    color: #333;
    word-break: break-all;
    white-space: pre-wrap;
    background-color: #fff;
    border-radius: 10rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  }
}
</style>
